<%--
  Created by IntelliJ IDEA.
  User: 赵
  Date: 2022/3/11
  Time: 23:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<head>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-table.css">

    <style type="text/css">
        @import 'https://fonts.googleapis.com/css?family=Roboto';

        html, body {
            height: 100%;
            width: 100%;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            /*   background-color: #444444; */
        }

        /* Normal Button */
        button {
            display: inline-block;
            margin: 0.75rem;
            padding: 0.75rem 1.5rem;
            border: none;
            outline: none;
            background-color: #2b669a;
            color: #fff;
            font-family: inherit;
            font-size: 1.125em;
            font-weight: 300;
            font-family: 'Roboto', sans-serif;
            line-height: 1.5rem;
            text-decoration: none;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 100ms ease-out;
            width: 100px;
            letter-spacing: 4px;
            border-radius: 2px;
        }
        button:focus,
        button:hover {
            background-color: #cccccc;
            box-shadow: 0 0 0 0.1875rem white,
            0 0 0 0.375rem #cccccc;
        }
        button:active {
            background-color: #2b669a;
            box-shadow: 0 0 0 0.1875rem #2b669a,
            0 0 0 0.375rem #2b669a;
            transition-duration: 75ms;
        }/*button*/

        .search{
            width: 449px;
            height: 46px;
            background:#eeefed;
            border:1px solid #eeefed;
            border-radius:3px;
        }
        .placeholder{
            border:1px solid #c8c8c8;
            border-radius:3px;
            margin-left: 2px;
            margin-top: 5px;
            padding:0px;
            width: 445px;
            height: 36px;
            color:#e4e4e7;
        }/*input part*/


        body{
            padding: 1em;
            background: none;
            text-align: left;
        }
        a{
            color: #739931;
        }
        .page{
            max-width: 60em;
            margin: 0 auto;
        }
        table th,
        table td{
            text-align: left;
        }
        table.layout{
            width: 150%;
            border-collapse: collapse;
        }
        table.display{
            margin: 1em 0;
        }
        table.display th,
        table.display td{
            border: 1px solid #B3BFAA;
            padding: .5em 1em;
        }

        table.display th{ background: #2B669A; }
        table.display td{ background: #fff; }

        table.responsive-table{
            box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
        }

        @media (max-width: 30em){
            table.responsive-table{
                box-shadow: none;
            }
            table.responsive-table thead{
                display: none;
            }
            table.display th,
            table.display td{
                padding: .5em;
            }

            table.responsive-table td:nth-child(1):before{
                content: 'Number';
            }
            table.responsive-table td:nth-child(2):before{
                content: 'Name';
            }
            table.responsive-table td:nth-child(1),
            table.responsive-table td:nth-child(2){
                padding-left: 25%;
            }
            table.responsive-table td:nth-child(1):before,
            table.responsive-table td:nth-child(2):before{
                position: absolute;
                left: .5em;
                font-weight: bold;
            }

            table.responsive-table tr,
            table.responsive-table td{
                display: block;
            }
            table.responsive-table tr{
                position: relative;
                margin-bottom: 1em;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            }
            table.responsive-table td{
                border-top: none;
            }
            table.responsive-table td.organisationnumber{
                background: #2E6DA4;
                border-top: 1px solid #2B669A;
            }
            table.responsive-table td.actions{
                position: absolute;
                top: 0;
                right: 0;
                border: none;
                background: none;
            }/*table part*/
        }</style>

</head>
<body>


<select id="choose" class="select" >   //onchange触发js
    <option selected="selected" value="0">请选择</option>
    <option value="1" >按姓名查找</option>     //选中，传value值到后台
    <option value="2" >按学号查找</option>
    <option value="3" >按状态查找</option>
</select>

<div class="page">
    <div class="search">
       <form action="/namefilter"  method="post">
            <input type="text" class="placeholder" placeholder="input" name="search1">
            <input type="submit" value="搜索" class="button">
        </form>
    </div>
    <h1>A responsive table</h1>
    <div>




        <table class="layout display responsive-table" id="display">
            <thead>
            <tr>
                <th style="color: honeydew">Student ID</th>
                <th style="color: honeydew">Name</th>
                <th style="color: honeydew">Date of Enrollment</th>
                <th style="color: honeydew">Contact Number</th>
                <th style="color: honeydew">Semester</th>
                <th style="color: honeydew">Student Status</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <c:forEach items="${stulist}" var="stu">
            <tr>
                <td class="organisationnumber">${stu.getStudentID()}</td>
                <td class="organisationnumber">${stu.getName()}</td>
                <td class="organisationnumber">${stu.getDateOfenrollment()}</td>
                <td class="organisationnumber">${stu.getContactnumber()}</td>
                <td class="organisationnumber">${stu.getSemester()}</td>
                <td class="organisationnumber">${stu.getStudentstatus()}</td>
            </tr>
            </c:forEach>
            <td class="organisationnumber">${stulistsize}</td>

            </tbody>
        </table>
    </div>
    <table>

    </table>
</div>
</body>
</html>


